﻿var zombies = zombies || {};

zombies.AddMediaType = function () {
    var self = this;
    self.Name = ko.observable();
    self.Description = ko.observable();
    self.IconPath = ko.observable();
    self.Mime = ko.observable();

    self.MediaTypeData = {
        Name: self.Name,
        Description: self.Description,
        IconPath: self.IconPath,
        Mime: self.Mime
    }

    self.doAdd = function () {
            $.ajax({
                type: "POST",
                url: "/api/AdminMediaType/PostMediaType",
                data: ko.toJSON(self.MediaTypeData), //Convert the Observable Data into JSON
                contentType: "application/json",
                dataType: 'json'
            }).done(function () {
                toastr.success('Tạo Kiểu Định Dạng Quảng Cáo Thành Công');
                window.location.replace('http://' + window.location.host + '/admin/listmediatype');
            }).fail(function () {
                toastr.error('Tạo thất bại');
            });
    }

    self.mimeList = ko.observableArray(
        [
            { name: "Video embed", value: "embed" },
            { name: "Flash(swf)", value: "application/x-shockwave-flash" },
            { name: "Images(*)", value: "image/*" },
            { name: "Video(*)", value: "video/*" }
        ]
    );
}

ko.bindingHandlers.fileUpload = {
    init: function (element, valueAccessor) {
        $(element).after('<div class="progress" style="display: none; width: 50%"><div class="bar"></div><div class="percent">0%</div></div><div class="progressError"></div>');
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var options = ko.utils.unwrapObservable(valueAccessor()),
            property = ko.utils.unwrapObservable(options.property),
            url = ko.utils.unwrapObservable(options.url);

        if (property && url) {
            $(element.form).change(function () {
                if (element.files.length)
                    var pre = $('#prethum');
                $.loadPreviewImg(element, pre);
            });
            $(element.form).submit(function () {
                if ($(element.form).valid() && element.files.length) {
                    var $this = $(element),
                        filename = $this.val();
                    var time = new Date($.now());
                    var fname = time.getTime() + $(element).prop("files")[0].name;
                    viewModel.IconPath("../Advertise/MediatypeIcon/" + fname);
                    // this uses jquery.form.js plugin
                    $(element.form).ajaxSubmit({
                        url: url,
                        type: "POST",
                        dataType: "json",
                        data:{fname: fname},
                        headers: { "Content-Disposition": "attachment; filename=" + filename },
                        beforeSubmit: function () {
                            $(".progress").show();
                            $(".progressError").hide();
                            $(".bar").width("0%")
                            $(".percent").html("0%");
                        },
                        uploadProgress: function (event, position, total, percentComplete) {
                            var percentVal = percentComplete + "%";
                            $(".bar").width(percentVal)
                            $(".percent").html(percentVal);
                        },
                        success: function (data) {
                            $(".progress").hide();
                            $(".progressError").hide();
                            // set viewModel property to IconPath
                            viewModel.doAdd();
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            $(".progress").hide();
                            $("div.progressError").html(jqXHR.responseText);
                        }
                    });
                }
                return false;
            });
        }
    }
}


var viewModel;
$(document).ready(function () {

    viewModel = new zombies.AddMediaType();

    ko.applyBindings(viewModel, document.getElementById("admin_content"));

});